// import {LazyLoad} from '../../static/javascripts/lazyLoad.js';
$(function(){
  class Love{
    constructor(){
      this._list = document.querySelector('.love .love_list')
      this.list = $('.love .love_list')
      this.data = {}
      this.getDatas();
      this.bindEvent();
    }
    getDatas(){
      let options = {
        url:'../../static/data/index/love.json'
      }
      axios(options).then(res=>{
        this.render(res.data)
        const observer = lozad();
        observer.observe();
      })
    }

    render(data){
      this.list.append(data.map(item=>`
        <li class='love_item'>
          <a href='javascript:void(0)' class='item_pic'>
            <img class='lozad' data-src='${item.src}'>
          </a>
          <div>
            <p class='item_title'>${item.title}</p>
            <span class='item_price'>${item.price}</span>
          </div>
          
        </li>
      `).join(''))
    }

    bindEvent(){
      this.list.on('click','.love_item',(e)=>{
        let ms = this.getRealEle(e.target)
        this.data.src = $(ms).find('.lozad').attr('src')
        this.data.title = $(ms).find('.item_title').html()
        this.data.price = $(ms).find('.item_price').html()

        console.log(this.data);
        console.log(JSON.stringify(this.data));

        location.href = '../../dist/goods-details.html#id=' + encodeURI(JSON.stringify(this.data))
      })
    }

    getRealEle(e){
      if(e.parentNode === this._list){
        return e
      }
      else{
        e = e.parentNode
        return this.getRealEle(e)
      }
    }
  }

  new Love()
})